<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动动画</title>


    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>

<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");

    btn200.onclick = function () {
        animate(box, 200);
    }

    btn400.onclick = function () {
        animate(box, 400);
    }

    function animate(obj, target) {
        clearInterval(obj.timmer);
        obj.timmer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style.left = obj.offsetLeft + step + 'px';
            if (obj.offsetLeft == target){
                clearInterval(obj.timmer);
            }
        }, 30);
    }

</script>